<template>
  <view class="index-pages">
    <view>
      <!-- element 不支持 component 标签， 首页使用 v-show 来控制显隐 -->
      <home v-show="tabIndex === 'home'" ref="homeModules" />
      <home v-show="tabIndex === 'class'" ref="homeModules" />
      <car v-show="tabIndex === 'car'" />
      <user v-show="tabIndex === 'user'" />
    </view>
    <f-tabbar @click="change" :value="tabIndex" :tabbar-item="tabItems"></f-tabbar>
  </view>
</template>

<script>
import fTabbar from '@/ft-components/f-tabbar/index.vue'
import home from './components/home.vue'
import car from './components/car.vue'
import user from './components/user.vue'

export default {
  name: 'Index',
  data() {
    return {
      tabIndex: 'home',
      tabItems: [
        { text: '首页', name: 'home', icon: 'home', dot: true },
        { text: '分类', name: 'class', icon: 'home', badge: '1' },
        { text: '购物车', name: 'car', icon: 'shopping-cart' },
        { text: '我的', name: 'user', icon: 'account' }
      ]
    }
  },
  components: { fTabbar, user, home, car },
  onLoad() {},
  methods: {
    change(e) {
      if ([2, 3].indexOf(e.index) !== -1) {
        uni.navigateTo({
          url: '/pages/login/login'
        })
        return uni.$u.toast('请您先登录')
      }
      this.tabIndex = e.name
      const result = this.$refs.homeModules.getData()
      if (this.tabItems[e.index].hasOwnProperty('badge')) this.tabItems[e.index].badge = result.num
    }
  }
}
</script>

<style scoped lang="scss"></style>
